<!-- 管理员新增  -->
<div class="modal fade personal-add" tabindex="-1" role="dialog" data-backdrop="static" aria-labelledby="myModalLabel" aria-hidden="true"
  id="adminAdd" [ngClass]="{'guide-true': !server.institutionMolde}">
  <div class="modal-dialog modal-lg institution-modal" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <!-- <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button> -->
        <h4 class="modal-title" id="myModalLabel">管理员-新增</h4>
      </div>
      <form #FormAdd="ngForm" novalidate enctype='multipart/form-data'>
        <div class="popup-body modal-body">
          <div class="col-xs-12 col-sm-6">
            <div class="form-group">
              <label class="col-xs-12 col-sm-3 control-label text-right">所属机构：</label>
              <div class="col-xs-12 col-sm-9">
                <p *ngIf="institutiondate">{{superiorAdd}}</p>
              </div>
            </div>
            <div class="form-group">
              <label class="col-xs-12 col-sm-3 control-label text-right" for="dhName">用户名：</label>
              <div class="col-xs-12 col-sm-9">
                <input type="text" name="userName" autocomplete="off" class="form-control" #userName=ngModel [(ngModel)]="adddate.userName"
                  pattern="^[a-zA-Z\d\u4E00-\u9FA5_]+$" placeholder="请输入用户名,输入英文和汉字" required />
                <label class="red required">*</label>
                <div *ngIf="userName.invalid && (userName.touched)" class="error-alert">
                  <div *ngIf="userName.errors.required">
                    <small class="error">请输入用户名</small>
                  </div>
                  <small class="error" *ngIf="userName.errors?.pattern ">不能输入特殊符号,允许输入_</small>
                </div>
              </div>
            </div>

            <div class="form-group ">
              <label class="col-xs-12 col-sm-3 control-label text-right" for="dhName">昵称：</label>
              <div class="col-xs-12 col-sm-9">
                <input type="text" name="displayName" #displayName=ngModel autocomplete="off" class="form-control" [(ngModel)]="adddate.displayName"
                  placeholder="请输入昵称,输入英文和汉字" pattern="^[a-zA-Z\d\u4E00-\u9FA5_]+$" required />
                <label class="red required">*</label>
                <div *ngIf="displayName.invalid && (displayName.touched)" class="error-alert">
                  <div *ngIf="displayName.errors.required">
                    <small class="error">请输入昵称</small>
                  </div>
                  <small class="error" *ngIf="displayName.errors?.pattern ">不能输入特殊符号,允许输入_</small>
                </div>
              </div>
            </div>



            <div class="form-group ">
              <label class="col-xs-12 col-sm-3 control-label text-right" for="dhName">头像：</label>
              <div class="col-xs-12 col-sm-9">
                <fieldset class="field">
                  <div id="uploadForm" enctype='multipart/form-data'>
                    <div class="fileinput fileinput-new" data-provides="fileinput" id="exampleInputUpload" style="margin-bottom: 9px;">
                      <div>
                        <span class="btn btn-primary btn-file">
                          <span class="fileinput-new">选择图片</span>
                          <span class="fileinput-exists">换一张</span>
                          <input type="file" name="image" id="picID" accept="image/gif,image/jpeg,image/x-png" />

                        </span>
                        <label class="red required">*</label>
                        <input type="hide" class="hide" name="target" #target="ngModel" [(ngModel)]="adddate.target" />
                        <a href="javascript:;" class="btn btn-warning fileinput-exists" data-dismiss="fileinput">移除</a>
                      </div>
                      <div class="fileinput-new thumbnail">
                        <img class="default-img" [src]="">
                      </div>
                      <div class="fileinput-preview fileinput-exists thumbnail"></div>
                    </div>
                  </div>
                </fieldset>

              </div>
            </div>
            <div class="form-group ">
              <label class="col-xs-12 col-sm-3 control-label text-right">所属角色：</label>
              <div class="col-xs-12 col-sm-9">
                <select name="roleId" #roleId="ngModel" [(ngModel)]="adddate.roleId" required>
                  <option *ngFor="let item of roledata" [value]='item.roleId'>{{item.roleName}}</option>
                </select>
              </div>
              <div *ngIf="roleId.invalid && (roleId.touched)" class="error-alert">
                <div *ngIf="roleId.errors.required">
                  <small class="error">请选择所属角色</small>
                </div>
              </div>
            </div>
            <input class="hide" type="text" name="institutionId" #institutionId="ngModel" [(ngModel)]="adddate.superiorAddId ">
            <input class="hide" type="text" name="createUserId" #createUserId="ngModel" [(ngModel)]="adddate.createUserId">
            <div class="form-group ">
              <label class="col-xs-12 col-sm-3 control-label text-right">性别：</label>
              <div class="col-xs-12 col-sm-9">
                <!-- <select name="sex" #sex=ngModel [(ngModel)]="adddate.sex" required>
                    <option value = ''>请选择</option>
                    <option value="1">男</option>
                    <option value="2">女</option>
                  </select> -->
                <div class="radiogroup">
                  <p-radioButton class="radio-p" name="sex" value="1" label="男" [(ngModel)]="adddate.sex" inputId="preopt1"></p-radioButton>
                  <p-radioButton class="radio-p" name="sex" value="2" label="女" [(ngModel)]="adddate.sex" inputId="preopt2"></p-radioButton>
                </div>
              </div>
              <!-- <div *ngIf="sex.invalid && (sex.dirty || sex.touched)" class="error-alert">
                  <div *ngIf="sex.errors.required">
                    <small class="error">请选择性别</small>
                  </div>
                </div> -->
            </div>

            <div class="form-group ">
              <label class="col-xs-12 col-sm-3 control-label text-right">用户状态：</label>
              <div class="col-xs-12 col-sm-9">
                <!-- <select name="status" #status=ngModel [(ngModel)]="adddate.status" required>
                    <option value = ''>请选择</option>
                    <option value="0">禁用</option>
                    <option value="1">启用</option>
                  </select> -->
                <label class="toggle toggle-positive">
                  <input type="checkbox" name="status" #status=ngModel [(ngModel)]="adddate.status">
                  <div class="track">
                    <div class="tit" *ngIf="adddate.status">启用</div>
                    <div class="tit right" *ngIf="!adddate.status">禁用</div>
                    <div class="handle"></div>
                  </div>
                </label>
              </div>
              <!-- <div *ngIf="status.invalid && (status.dirty || status.touched)" class="error-alert">
                  <div *ngIf="status.errors.required">
                    <small class="error">请选择用户状态</small>
                  </div>
                </div> -->
            </div>
            <div class="form-group ">
              <label class="col-xs-12 col-sm-3 control-label text-right">邮箱激活状态：</label>
              <div class="col-xs-12 col-sm-9">
                <!-- <select name="isActivate" #isActivate=ngModel [(ngModel)]="adddate.isActivate" required>
                    <option value = ''>请选择</option>
                    <option value="0">未激活</option>
                    <option value="1">激活</option>
                  </select> -->
                <label class="toggle toggle-positive">
                  <input type="checkbox" name="isActivate" #isActivate=ngModel [(ngModel)]="adddate.isActivate">
                  <div class="track">
                    <div class="tit" *ngIf="adddate.isActivate">激活</div>
                    <div class="tit right" *ngIf="!adddate.isActivate">未激活</div>
                    <div class="handle"></div>
                  </div>
                </label>
              </div>
              <!-- <div *ngIf="isActivate.invalid && (isActivate.dirty || isActivate.touched)" class="error-alert">
                  <div *ngIf="isActivate.errors.required">
                    <small class="error">请选择邮箱激活状态</small>
                  </div>
                </div> -->
            </div>

            <div class="form-group ">
              <label class="col-xs-12 col-sm-3 control-label text-right">实名认证状态：</label>
              <div class="col-xs-12 col-sm-9">
                <!-- <select name="isAutonym" #isAutonym=ngModel [(ngModel)]="adddate.isAutonym" required>
                    <option value = ''>请选择</option>
                    <option value="0">未认证</option>
                    <option value="1">认证</option>
                  </select> -->
                <label class="toggle toggle-positive">
                  <input type="checkbox" name="isAutonym" #isAutonym=ngModel [(ngModel)]="adddate.isAutonym">
                  <div class="track">
                    <div class="tit" *ngIf="adddate.isAutonym">认证</div>
                    <div class="tit right" *ngIf="!adddate.isAutonym">未认证</div>
                    <div class="handle"></div>
                  </div>
                </label>
              </div>
              <!-- <div *ngIf="isAutonym.invalid && (isAutonym.dirty || isAutonym.touched)" class="error-alert">
                  <div *ngIf="isAutonym.errors.required">
                    <small class="error">请选择实名认证状态</small>
                  </div>
                </div> -->
            </div>

          </div>
          <div class="col-xs-12 col-sm-6">

            <div class="form-group ">
              <label class="col-xs-12 col-sm-3 control-label text-right">手机：</label>
              <div class="col-xs-12 col-sm-9">
                <input type="number:0" name="mobile" #mobile=ngModel autocomplete="off" class="form-control" [(ngModel)]="adddate.mobile"
                  pattern="^1[34578]\d{9}$" />
                <!-- <label class="red required">*</label>placeholder="请输入正确的手机号码" -->
                <div *ngIf="mobile.invalid && ( mobile.touched)" class="error-alert">
                  <!-- <small class="error" *ngIf="mobile.errors?.required">请输入手机号码</small> -->
                  <small class="error" *ngIf="mobile.errors?.pattern ">请输入正确的手机号码</small>
                </div>
              </div>
            </div>


            <div class="form-group ">
              <label class="col-xs-12 col-sm-3 control-label text-right">身份证：</label>
              <div class="col-xs-12 col-sm-9">
                <input type="number:0" name="identityCard" #identityCard=ngModel autocomplete="off" class="form-control" [(ngModel)]="adddate.identityCard"
                  pattern="/(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/" />
                <!-- <label class="red required">*</label> placeholder="请输入正确的身份证号码"-->
                <div *ngIf="identityCard.invalid && (identityCard.touched)" class="error-alert">
                  <!-- <small class="error" *ngIf="identityCard.errors?.required">请输入身份证号码</small> -->
                  <small class="error" *ngIf="identityCard.errors?.pattern">请输入正确的身份证号码</small>
                </div>

              </div>
            </div>
            <div class="form-group ">
              <label class="col-xs-12 col-sm-3 control-label text-right">真实姓名：</label>
              <div class="col-xs-12 col-sm-9">
                <input type="text" name="realName" #realName="ngModel" autocomplete="off" class="form-control" [(ngModel)]="adddate.realName"
                  pattern="^[a-zA-Z\d\u4E00-\u9FA5_]+$" />
                <!-- <label class="red required">*</label> placeholder="请输入真实姓名，输入英文和汉字"-->
                <div *ngIf="realName.invalid && (realName.touched)" class="error-alert">
                  <!-- <div *ngIf="realName.errors.required">
                    <small class="error">请输入真实姓名</small>
                  </div> -->
                  <small class="error" *ngIf="realName.errors?.pattern ">不能输入特殊符号,允许输入_</small>
                </div>
              </div>
            </div>

            <div class="form-group">
              <label class="col-xs-12 col-sm-3 control-label text-right">邮箱：</label>
              <div class="col-xs-12 col-sm-9">
                <input type="email" name="email" #email=ngModel autocomplete="off" class="form-control" [(ngModel)]="adddate.email" pattern="^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$"
                />
                <div *ngIf="email.invalid && (email.touched)" class="error-alert">
                  <small class="error" *ngIf="email.errors?.pattern ">请输入正确的邮箱格式</small>
                </div>
              </div>
            </div>
            <div class="form-group ">
              <label class="col-xs-12 col-sm-3 control-label text-right" for="dhName">注册来源：</label>
              <div class="col-xs-12 col-sm-9">
                <input type="text" name="registerSource" #registerSource=ngModel autocomplete="off" class="form-control" [(ngModel)]="adddate.registerSource"
                />

              </div>
            </div>


            <div class="form-group">
              <label class="col-xs-12 col-sm-3 control-label text-right">电话：</label>
              <div class="col-xs-12 col-sm-9">
                <input type="number" name="phone" autocomplete="off" class="form-control" [(ngModel)]="adddate.phone" />
              </div>
            </div>

            <div class="form-group ">
              <label class="col-xs-12 col-sm-3 control-label text-right">出生年月：</label>
              <div class="col-xs-12 col-sm-9">
                <input type="text" autocomplete="off" class="form-control" name="birthday" [(ngModel)]="adddate.birthday" #dp="bsDatepicker"
                  bsDatepicker [bsConfig]="{ dateInputFormat: 'YYYY-MM-DD'}" />
              </div>
            </div>
            <div class="form-group ">
              <label class="col-xs-12 col-sm-3 control-label text-right">城市：</label>
              <div class="col-xs-12 col-sm-9">
                <input type="text" autocomplete="off" class="form-control" name="city" [(ngModel)]="adddate.city" />
              </div>
            </div>
            <div class="form-group ">
              <label class="col-xs-12 col-sm-3 control-label text-right">地址：</label>
              <div class="col-xs-12 col-sm-9">
                <input type="text" autocomplete="off" class="form-control" name="address" [(ngModel)]="adddate.address" />
              </div>
            </div>
            <div class="form-group ">
              <label class="col-xs-12 col-sm-3 control-label text-right">qq号：</label>
              <div class="col-xs-12 col-sm-9">
                <input type="text" autocomplete="off" class="form-control" name="qq" [(ngModel)]="adddate.qq" />
              </div>
            </div>
            <div class="form-group ">
              <label class="col-xs-12 col-sm-3 control-label text-right">邮编：</label>
              <div class="col-xs-12 col-sm-9">
                <input type="text" autocomplete="off" class="form-control" name="postCode" [(ngModel)]="adddate.postCode" />
              </div>
            </div>
            <div class="form-group ">
              <label class="col-xs-12 col-sm-3 control-label text-right">学校：</label>
              <div class="col-xs-12 col-sm-9">
                <input type="text" autocomplete="off" class="form-control" name="school" [(ngModel)]="adddate.school" />
              </div>
            </div>
          </div>
        </div>
        <div class="popup-footer modal-footer">
          <input class="hide" name="imgactive" [(ngModel)]="imgActive" required/>
          <button type="button" class="btn btn-primary" [disabled]="FormAdd.invalid" (click)="submitAdd(FormAdd.value,0)"><span class="glyphicon glyphicon-plus"></span> 新增管理员完成退出</button>
          <button type="button" class="btn btn-primary" [disabled]="FormAdd.invalid" (click)="submitAdd(FormAdd.value,1)"><span class="glyphicon glyphicon-plus"></span> 设置IP白名单规则
            <img class="gesture-img" src="assets/right-product/guide/hand.png" />
          </button>
        </div>
      </form>
    </div>

  </div>

</div>
<!-- 管理员新增 END -->